<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E4E7ED',
                            300: '#C0C6CF',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                            700: '#1E1E20',
                            800: '#141414',
                        },
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'elevation-1': '0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)',
                        'elevation-2': '0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1)',
                        'elevation-3': '0 10px 15px rgba(0, 0, 0, 0.07), 0 5px 10px rgba(0, 0, 0, 0.05)',
                        'elevation-4': '0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)',
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #36BFFA 100%);
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                background-image: linear-gradient(135deg, #165DFF 0%, #36BFFA 100%);
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
            .card-hover {
                @apply hover:shadow-elevation-3 transition-all duration-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 min-h-screen flex items-center justify-center p-4 text-neutral-600">
    <div class="max-w-7xl w-full mx-auto">
        <!-- 页面标题 -->
        <div class="text-center mb-12 animate-fade-in">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-neutral-800 mb-4">
                <span class="text-gradient">创建</span> 新账户
            </h1>
            <p class="text-neutral-500 text-lg max-w-2xl mx-auto">
                填写以下信息，开始您的精彩旅程
            </p>
        </div>

        <!-- 主要内容区域 -->
        <div class="flex flex-col md:flex-row items-center justify-center gap-8">
            <!-- 装饰性图片区域 -->
            <div class="w-full md:w-1/2 hidden md:block">
                <div class="relative">
                    <div class="absolute -inset-4 bg-gradient-primary rounded-3xl blur-3xl opacity-20 animate-pulse-slow"></div>
                    <img 
                        src="https://picsum.photos/id/3/600/600" 
                        alt="创建新账户" 
                        class="relative rounded-2xl shadow-elevation-4 w-full object-cover h-[500px] card-hover"
                    >
                    <div class="absolute -bottom-6 -right-6 bg-white p-6 rounded-2xl shadow-elevation-2 w-2/3 animate-slide-up">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                <i class="fa fa-user-plus text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-neutral-800">快速注册</h3>
                                <p class="text-sm text-neutral-500">几分钟内完成注册，开始享受我们的服务</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 注册表单 -->
            <div class="w-full md:w-2/5 max-w-md">
                <div class="bg-white rounded-2xl shadow-elevation-2 overflow-hidden animate-fade-in">
                    <div class="p-8">
                        <h2 class="text-2xl font-bold text-neutral-800 mb-6">填写注册信息</h2>
                        <form class="space-y-5" id="register-form">
                            <div>
                                <label for="name" class="block text-sm font-medium text-neutral-700 mb-1">姓名</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                        <i class="fa fa-user-o"></i>
                                    </span>
                                    <input 
                                        type="text" 
                                        id="name" 
                                        class="w-full pl-10 pr-4 py-3 border border-neutral-300 rounded-lg input-focus transition-all"
                                        placeholder="请输入您的姓名"
                                        required
                                    >
                                </div>
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-neutral-700 mb-1">电子邮箱</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                        <i class="fa fa-envelope-o"></i>
                                    </span>
                                    <input 
                                        type="email" 
                                        id="email" 
                                        class="w-full pl-10 pr-4 py-3 border border-neutral-300 rounded-lg input-focus transition-all"
                                        placeholder="your@email.com"
                                        required
                                    >
                                </div>
                            </div>
                            <div>
                                <label for="password" class="block text-sm font-medium text-neutral-700 mb-1">密码</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                        <i class="fa fa-lock"></i>
                                    </span>
                                    <input 
                                        type="password" 
                                        id="password" 
                                        class="w-full pl-10 pr-10 py-3 border border-neutral-300 rounded-lg input-focus transition-all"
                                        placeholder="至少8个字符，包含字母和数字"
                                        required
                                    >
                                    <button type="button" class="toggle-password absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600">
                                        <i class="fa fa-eye-slash"></i>
                                    </button>
                                </div>
                            </div>
                            <div>
                                <label for="confirm-password" class="block text-sm font-medium text-neutral-700 mb-1">确认密码</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                        <i class="fa fa-lock"></i>
                                    </span>
                                    <input 
                                        type="password" 
                                        id="confirm-password" 
                                        class="w-full pl-10 pr-10 py-3 border border-neutral-300 rounded-lg input-focus transition-all"
                                        placeholder="再次输入您的密码"
                                        required
                                    >
                                    <button type="button" class="toggle-password absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600">
                                        <i class="fa fa-eye-slash"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="password-strength" id="password-strength">
                                <div class="flex gap-1 mb-1">
                                    <div class="strength-bar h-1 w-1/4 rounded-full bg-neutral-200" data-strength="1"></div>
                                    <div class="strength-bar h-1 w-1/4 rounded-full bg-neutral-200" data-strength="2"></div>
                                    <div class="strength-bar h-1 w-1/4 rounded-full bg-neutral-200" data-strength="3"></div>
                                    <div class="strength-bar h-1 w-1/4 rounded-full bg-neutral-200" data-strength="4"></div>
                                </div>
                                <p class="text-xs text-neutral-500" id="strength-text">密码强度: 未输入</p>
                            </div>
                            <div class="flex items-start">
                                <input 
                                    type="checkbox" 
                                    id="terms-agree" 
                                    class="w-4 h-4 mt-1 text-primary border-neutral-300 rounded focus:ring-primary"
                                    required
                                >
                                <label for="terms-agree" class="ml-2 text-sm text-neutral-600">
                                    我已阅读并同意<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#" class="text-primary hover:underline">隐私政策</a>
                                </label>
                            </div>
                            <button 
                                type="submit" 
                                class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg shadow-md btn-hover"
                            >
                                <i class="fa fa-user-plus mr-2"></i>注册账户
                            </button>
                        </form>
                        <div class="mt-6 text-center">
                            <p class="text-sm text-neutral-600">
                                已有账户? <a href="#" class="text-primary font-medium hover:underline">立即登录</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="mt-16 text-center text-neutral-500 text-sm animate-fade-in">
            <p>© 2025 账户管理中心. 保留所有权利.</p>
            <div class="mt-4 flex justify-center space-x-6">
                <a href="#" class="hover:text-primary transition-colors">隐私政策</a>
                <a href="#" class="hover:text-primary transition-colors">服务条款</a>
                <a href="#" class="hover:text-primary transition-colors">帮助中心</a>
                <a href="#" class="hover:text-primary transition-colors">联系我们</a>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 密码显示/隐藏切换按钮
            const togglePasswordBtns = document.querySelectorAll('.toggle-password');
            const passwordInput = document.getElementById('password');
            const confirmPasswordInput = document.getElementById('confirm-password');
            
            // 密码强度检测
            const strengthBars = document.querySelectorAll('.strength-bar');
            const strengthText = document.getElementById('strength-text');
            
            // 密码显示/隐藏功能
            togglePasswordBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const input = this.previousElementSibling;
                    const icon = this.querySelector('i');
                    
                    // 切换密码可见性
                    const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                    input.setAttribute('type', type);
                    
                    // 切换图标
                    if (type === 'text') {
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    } else {
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    }
                });
            });
            
            // 密码强度检测
            if (passwordInput) {
                passwordInput.addEventListener('input', function() {
                    const password = this.value;
                    let strength = 0;
                    
                    // 密码长度检查
                    if (password.length >= 8) strength++;
                    
                    // 包含小写字母
                    if (/[a-z]/.test(password)) strength++;
                    
                    // 包含大写字母
                    if (/[A-Z]/.test(password)) strength++;
                    
                    // 包含数字
                    if (/[0-9]/.test(password)) strength++;
                    
                    // 包含特殊字符
                    if (/[^A-Za-z0-9]/.test(password)) strength++;
                    
                    // 更新强度条
                    strengthBars.forEach((bar, index) => {
                        if (index < strength) {
                            // 根据强度设置不同颜色
                            if (strength === 1) {
                                bar.classList.remove('bg-neutral-200', 'bg-yellow-400', 'bg-green-500');
                                bar.classList.add('bg-red-500');
                            } else if (strength === 2) {
                                bar.classList.remove('bg-neutral-200', 'bg-red-500', 'bg-green-500');
                                bar.classList.add('bg-yellow-400');
                            } else {
                                bar.classList.remove('bg-neutral-200', 'bg-red-500', 'bg-yellow-400');
                                bar.classList.add('bg-green-500');
                            }
                        } else {
                            bar.classList.remove('bg-red-500', 'bg-yellow-400', 'bg-green-500');
                            bar.classList.add('bg-neutral-200');
                        }
                    });
                    
                    // 更新强度文本
                    let strengthLabel = '未输入';
                    if (password.length === 0) {
                        strengthLabel = '未输入';
                    } else if (strength <= 2) {
                        strengthLabel = '弱';
                    } else if (strength <= 3) {
                        strengthLabel = '中';
                    } else if (strength <= 4) {
                        strengthLabel = '强';
                    } else {
                        strengthLabel = '非常强';
                    }
                    
                    strengthText.textContent = `密码强度: ${strengthLabel}`;
                });
            }
            
            // 表单提交处理
            const registerForm = document.getElementById('register-form');
            if (registerForm) {
                registerForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const submitBtn = this.querySelector('button[type="submit"]');
                    
                    // 显示加载状态
                    const originalText = submitBtn.innerHTML;
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>注册中...';
                    
                    // 模拟提交过程
                    setTimeout(() => {
                        // 显示成功消息
                        showNotification('注册成功！请查收验证邮件', 'success');
                        
                        // 恢复按钮状态
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                    }, 1500);
                });
            }
            
            // 通知功能
            function showNotification(message, type = 'info') {
                // 创建通知元素
                const notification = document.createElement('div');
                notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-elevation-3 z-50 transform transition-all duration-500 ease-in-out`;
                
                // 根据类型设置样式
                if (type === 'success') {
                    notification.classList.add('bg-green-50', 'border-l-4', 'border-green-500', 'text-green-800');
                    notification.innerHTML = `
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <i class="fa fa-check-circle text-green-500 text-xl"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium">${message}</p>
                            </div>
                        </div>
                    `;
                } else if (type === 'error') {
                    notification.classList.add('bg-red-50', 'border-l-4', 'border-red-500', 'text-red-800');
                    notification.innerHTML = `
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <i class="fa fa-exclamation-circle text-red-500 text-xl"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium">${message}</p>
                            </div>
                        </div>
                    `;
                } else {
                    notification.classList.add('bg-blue-50', 'border-l-4', 'border-blue-500', 'text-blue-800');
                    notification.innerHTML = `
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <i class="fa fa-info-circle text-blue-500 text-xl"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium">${message}</p>
                            </div>
                        </div>
                    `;
                }
                
                // 添加到页面
                document.body.appendChild(notification);
                
                // 动画显示
                setTimeout(() => {
                    notification.classList.add('translate-y-0');
                    notification.classList.remove('-translate-y-full');
                }, 10);
                
                // 自动关闭
                setTimeout(() => {
                    notification.classList.add('-translate-y-full');
                    notification.classList.remove('translate-y-0');
                    
                    // 移除元素
                    setTimeout(() => {
                        document.body.removeChild(notification);
                    }, 500);
                }, 3000);
            }
        });
    </script>
</body>
</html>
    